<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Swiper</title>
	<!-- 引入css文件 -->
	<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
	<style type="text/css">
		.swiper-container {
    		width: 600px;
    		height: 300px;
		}

	img{
		width: 100%;
		height: 900px;
	}  
	</style>
</head>
<body>
	<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1<img src="img/1.jpg"></div>
        <div class="swiper-slide">Slide 2<img src="img/2.jpg"></div>
        <div class="swiper-slide">Slide 3<img src="img/3.jpg"></div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
</body>

	<!-- 引入js文件 -->
	<script src="js/swiper.min.js">
	</script>
	<script>        
  var mySwiper = new Swiper ('.swiper-container', {
  		//渐入渐出 
 effect : 'fade',
fade: {
  crossFade: false,
 },

// effect : 'cube',
// cube: {
//   slideShadows: true,
//   shadow: true,
//   shadowOffset: 100,
//   shadowScale: 0.6
// },
	// 折页
		// effect : 'coverflow',
		// 	slidesPerView: 3,
		// 	centeredSlides: true,
		// 	coverflow: {
	 //            rotate: 30,
	 //            stretch: 10,
	 //            depth: 60,
	 //            modifier: 2,
	 //            slideShadows : true
	 //        },

	        // 翻转
// 	        effect : 'flip',
// flip: {
//             slideShadows : true,
//             limitRotation : true,
//         },

    direction: 'vertical',
    // vertical垂直的  horizonal水平的
    // 自动播放 autoplay
    // 速度 speed ms
    // loop 循环（true false）
    loop: true,
    
    // 如果需要分页器（点）
    pagination: '.swiper-pagination',
    
    // 如果需要前进后退按钮
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    
    // 如果需要滚动条
    scrollbar: '.swiper-scrollbar',
  })        
  </script>
</html>